<template>
  <div class="dashboard-container">
    <!-- 头部标题区 -->
    <el-card shadow="never" class="mt-2">
      <div class="text-center py-6">
        <h3 class="text-2xl font-bold text-gray-800">全景预约分诊</h3>
      </div>
    </el-card>

    <!-- 流程内容区 -->
    <div class="container mx-auto px-4 py-8">
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <!-- 门诊预约卡片 -->
        <el-card shadow="never" class="fade-in delay-100">
          <template #header>
            <div class="flex items-center">
              <el-icon class="mr-2 text-blue-700">
                <Calendar />
              </el-icon>
              <h4 class="text-xl font-semibold text-blue-700">门诊预约</h4>
            </div>
          </template>

          <div class="child-node">
            <h4 class="flex items-center">
              <el-icon class="mr-2 text-blue-500">
                <!-- <Laptop /> -->
              </el-icon>
              线上预约
            </h4>
            <div class="feature-buttons mt-3">
              <el-button
                type="primary"
                size="small"
                @click="openVideo('http://119.91.102.80:400/video/掌医预约.mp4')"
              >
                掌医
              </el-button>
              <el-button
                type="primary"
                size="small"
                @click="openVideo('http://119.91.102.80:400/video/区域预约平台（美丽厦门）.mp4')"
              >
                区域预约平台
              </el-button>
            </div>
          </div>

          <div class="child-node mt-4">
            <h4 class="flex items-center">
              <el-icon class="mr-2 text-blue-500">
                <User />
              </el-icon>
              线下预约
            </h4>
            <div class="feature-buttons mt-3">
              <el-button type="primary" size="small">自助机</el-button>
              <el-button
                type="primary"
                size="small"
                @click="
                  openLink(
                    'http://119.91.102.80:200/Home/Index?i=9c3fb55d-c76b-4841-9d64-365906f657ab'
                  )
                "
              >
                导诊台
              </el-button>
              <el-button type="primary" size="small">医生工作站</el-button>
              <el-button type="primary" size="small">客服中心</el-button>
            </div>
          </div>
        </el-card>

        <!-- 预约签到卡片 -->
        <el-card shadow="never" class="fade-in delay-200">
          <template #header>
            <div class="flex items-center">
              <el-icon class="mr-2 text-blue-700">
                <!-- <CheckIn /> -->
              </el-icon>
              <h4 class="text-xl font-semibold text-blue-700">预约签到</h4>
            </div>
          </template>

          <div class="child-node">
            <h4 class="flex items-center">
              <el-icon class="mr-2 text-blue-500">
                <!-- <SmartPhone /> -->
              </el-icon>
              线上签到
            </h4>
            <div class="feature-buttons mt-3">
              <el-button type="primary" size="small">掌医</el-button>
            </div>
          </div>

          <div class="child-node mt-4">
            <h4 class="flex items-center">
              <el-icon class="mr-2 text-blue-500">
                <Monitor />
              </el-icon>
              线下签到
            </h4>
            <div class="feature-buttons mt-3">
              <el-button
                type="primary"
                size="small"
                @click="openLink('http://119.91.102.80:8088/jldemo/banner.html')"
              >
                自助机
              </el-button>
              <el-button type="primary" size="small">分诊台</el-button>
            </div>
          </div>
        </el-card>

        <!-- 排队叫号卡片 -->
        <el-card shadow="never" class="fade-in delay-300">
          <template #header>
            <div class="flex items-center">
              <el-icon class="mr-2 text-blue-700">
                <Bell />
              </el-icon>
              <h4 class="text-xl font-semibold text-blue-700">排队叫号</h4>
            </div>
          </template>

          <div class="child-node">
            <h4 class="flex items-center">
              <el-icon class="mr-2 text-blue-500">
                <!-- <UserNurse /> -->
              </el-icon>
              护士端
            </h4>
            <div class="feature-buttons mt-3">
              <el-button
                type="primary"
                size="small"
                @click="
                  openLink(
                    'http://119.91.102.80:200/Home/Index?i=9c3fb55d-c76b-4841-9d64-365906f657ab'
                  )
                "
              >
                分诊台
              </el-button>
            </div>
          </div>

          <div class="child-node mt-4">
            <h4 class="flex items-center">
              <el-icon class="mr-2 text-blue-500">
                <!-- <UserDoctor /> -->
              </el-icon>
              医生端
            </h4>
            <div class="feature-buttons mt-3">
              <el-button type="primary" size="small">医生呼叫器</el-button>
            </div>
          </div>

          <div class="child-node mt-4">
            <h4 class="flex items-center">
              <el-icon class="mr-2 text-blue-500">
                <User />
              </el-icon>
              患者端
            </h4>
            <div class="feature-buttons mt-3">
              <el-button type="primary" size="small">候诊叫号屏</el-button>
              <el-button type="primary" size="small">医生诊室屏</el-button>
              <el-button type="primary" size="small">过号回诊</el-button>
              <el-button type="primary" size="small">看报告回诊</el-button>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from "vue";
import {
  Calendar,
  // CheckIn,
  Bell,
  // Laptop,
  User,
  Monitor,
  // SmartPhone,
  // UserNurse,
  // UserDoctor,
} from "@element-plus/icons-vue";

// 打开视频链接
const openVideo = (url) => {
  window.open(url, "_blank");
};

// 打开外部链接
const openLink = (url) => {
  window.open(url, "_blank");
};

// 检查滚动动画
const checkFadeElements = () => {
  const fadeElements = document.querySelectorAll(".fade-in");
  fadeElements.forEach((element) => {
    const elementTop = element.getBoundingClientRect().top;
    const windowHeight = window.innerHeight;
    if (elementTop < windowHeight * 0.85) {
      element.style.opacity = "1";
      element.style.transform = "translateY(0)";
    }
  });
};

// 组件挂载时初始化
onMounted(() => {
  checkFadeElements();
  window.addEventListener("scroll", checkFadeElements);
});
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 24px;
  background-color: #f0f9ff;
}

.child-node {
  padding: 15px;
  background-color: #f0f9ff;
  border-left: 4px solid #3b82f6;
  border-radius: 8px;
  transition: all 0.3s ease;

  &:hover {
    background-color: #e0f2fe;
    transform: translateX(5px);
  }

  h4 {
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 600;
    color: #1e40af;
  }
}

.feature-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;

  &.delay-100 {
    transition-delay: 0.1s;
  }

  &.delay-200 {
    transition-delay: 0.2s;
  }

  &.delay-300 {
    transition-delay: 0.3s;
  }
}

@media (max-width: 768px) {
  .dashboard-container {
    padding: 12px;
  }

  .grid {
    grid-template-columns: 1fr !important;
  }
}
</style>
